<template>
  <!-- @mousedown="down" @mousemove="move" @mouseup="up" -->
  <div
    @drop.prevent=""
    @dragenter.prevent="fileDragEnter"
    @dragover.prevent=""
    @dragleave.prevent=""
    id="v-step-0"
  >
    <div
      id="file"
      class="file"
      @click.exact="clearSelect()"
      @contextmenu.prevent.stop="fileRightMenu"
    >
      <div
        :class="'file-list1 ' + (tableType === 1 ? 'table' : 'list')"
        v-if="fileList.length > 0"
      >
        <div class="item">
          <div :class="'file-item' + (isTop ? '' : ' on')">
            <div class="check" @click.prevent.stop="toggleAll">
              <el-checkbox
                :value="checkAll"
                style="pointer-events: none"
              ></el-checkbox>
            </div>
            <div class="all" v-if="tableType === 2">全选</div>
            <div class="name" v-if="tableType === 1">名称</div>
            <div class="time" v-if="tableType === 1">修改时间</div>
            <div class="size" v-if="tableType === 1">大小</div>
          </div>
        </div>
      </div>
      <el-scrollbar
        class="scrollbar"
        :style="
          fileList.length > 0
            ? 'height: calc(100vh - 45px - 63px)'
            : 'height: calc(100vh - 45px)'
        "
      >
        <div
          :class="'file-list ' + (tableType === 1 ? 'table' : 'list')"
          v-if="fileList.length > 0"
        >
          <div
            class="item"
            v-for="(item, index) in fileList"
            :key="item.fileId"
            :data-id="index"
          >
            <div
              :ref="(dom) => push(dom, index, item)"
              :class="
                'file-item item' +
                index +
                (getListIndex(item) >= 0 ? ' on' : '')
              "
              draggable="true"
              @dragstart="onDragStart($event, item)"
              @dragover.prevent
              @drop.stop="onDrop($event, item)"
              @dblclick.exact="clickFilename(item)"
              @click.exact.stop="selectItem(item)"
              @click.ctrl.stop="selectItems(item)"
              @click.shift.stop="shiftSelectItems(item, index)"
              @contextmenu.prevent.stop="itemRightMenu($event, item, index)"
              @dragleave.stop=""
              :title="item.filename"
            >
              <div class="check" v-if="tableType === 1">
                <el-checkbox :value="getListIndex(item) >= 0"></el-checkbox>
              </div>
              <i
                class="el-icon-circle-check"
                v-if="tableType === 2 && getListIndex(item) >= 0"
              ></i>
              <div class="icon" style="">
                <el-image
                  v-if="item.fileType === 7 && tableType === 2"
                  :src="getPreviewUrl(item.fileId)"
                  fit="contain"
                  lazy
                  style="height: 60px"
                >
                  <svg slot="placeholder" class="svgicon" aria-hidden="true">
                    <use
                      :xlink:href="'#icon-' + getFileFontElement(item.fileType)"
                    ></use>
                  </svg>
                  <svg slot="error" class="svgicon" aria-hidden="true">
                    <use
                      :xlink:href="'#icon-' + getFileFontElement(item.fileType)"
                    ></use>
                  </svg>
                </el-image>
                <template v-else-if="item.fileType === 9 && tableType === 2">
                  <video-img :fileId="item.fileId" />
                </template>
                <svg v-else class="svgicon" aria-hidden="true">
                  <use
                    :xlink:href="'#icon-' + getFileFontElement(item.fileType)"
                  ></use>
                </svg>
              </div>
              <div class="name">
                {{ item.filename }}
              </div>
              <div class="time">
                {{ item.updateTime }}
              </div>
              <div class="size">
                {{ item.fileSizeDesc }}
              </div>
            </div>
          </div>
        </div>
        <div class="empty" v-else>
          <div>
            <div class="icon">
              <i class="iconfont icon-empty1"></i>
            </div>
            <div class="title">
              {{
                searchFlag
                  ? '未找到搜索的文件或文件夹～'
                  : '超大空间等你来填满，快来上传吧～'
              }}
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div
      class="right-menu"
      v-if="contextMenuVisible"
      :style="`left: ${rightMenuConfig.left}px; top:${rightMenuConfig.top}px;`"
    >
      <template v-if="rightMenuConfig.type === 'item'">
        <a
          href="javascript:;"
          v-if="multipleSelection.length === 1"
          @click="clickFilename(multipleSelection[0])"
        >
          <i class="el-icon-folder-opened"></i>打<span
            style="visibility: hidden"
            >下</span
          >开
        </a>

        <download-button liFlag></download-button>
        <share-button liFlag></share-button>
        <rename-button
          v-if="multipleSelection.length === 1"
          liFlag
        ></rename-button>
        <copy-button liFlag></copy-button>
        <transfer-button liFlag></transfer-button>
        <delete-button liFlag></delete-button>
      </template>
      <template v-else>
        <createFolderButton liFlag></createFolderButton>
        <uploadButton liFlag></uploadButton>
        <a
          href="javascript:;"
          @click="
            reloadFileList()
            setContextMenuVisible(false)
          "
        >
          <i class="el-icon-refresh"></i>刷<span style="visibility: hidden"
            >下</span
          >新
        </a>
      </template>
    </div>
    <transition
      name="animate__animated animate__fade"
      enter-active-class="animate__fadeInUp"
      leave-active-class="animate__fadeOutDown"
    >
      <button-bar
        @click.exact.stop=""
        v-if="multipleSelection.length > 0 && !contextMenuVisible"
      />
    </transition>

    <el-image-viewer
      class="el-image-viewer"
      :initial-index="imgIndex"
      v-if="showViewer"
      :on-close="closeShowViewer"
      :url-list="imgUrl"
    />
    <office-preview
      :visible.sync="officeFlag"
      :info="previewInfo"
      @onClose="closeShow"
    />
    <code-preview
      :visible.sync="codeFlag"
      :info="previewInfo"
      @onClose="closeShow"
    />
    <video-preview
      :visible.sync="videoFlag"
      :info="previewInfo"
      @onClose="closeShow"
    />
    <!-- <upload-list /> -->
    <v-tour
      name="myTour"
      :steps="steps"
      :options="stepsOptions"
      onFinish="tourClose"
      :callbacks="myCallbacks"
    ></v-tour>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapGetters } from 'vuex'
import panUtil from '@/utils/common'
import fileService from '@/api/file/index.js'
import '@/assets/fonts/iconfont.js'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import buttonBar from '@/components/button-bar'
import DownloadButton from '@/components/buttons/download-button/index.vue'
import ShareButton from '@/components/buttons/share-button/index.vue'
import RenameButton from '@/components/buttons/rename-button/index.vue'
import CopyButton from '@/components/buttons/copy-button/index.vue'
import TransferButton from '@/components/buttons/transfer-button/index.vue'
import DeleteButton from '@/components/buttons/delete-button/index.vue'
import createFolderButton from '@/components/buttons/create-folder-button/index.vue'
import uploadButton from '@/components/buttons/upload-button/index.vue'
import PanTaskList from '@/components/task-list/index.vue'
import VideoImg from './video-img.vue'
import officePreview from '@/components/preview/office/index.vue'
import codePreview from '@/components/preview/code/index.vue'
import videoPreview from '@/components/preview/video/index.vue'
import { Video } from 'video-metadata-thumbnails'
// import { deleteFile } from '@/api/file/index2'
// import UploadList from '@/components/upload-list/index.vue'
export default {
  name: 'FileTable',
  data() {
    return {
      cloneList: [],
      tableHeight: window.innerHeight - 200,
      showViewer: false,
      imgUrl: [],
      imgIndex: 0,
      type: 2,
      items: [],
      isDrag: false,
      to: null,
      from: null,
      contextMenuTarget: null,
      // checkAll: false,
      isTop: true,
      rightMenuConfig: {
        left: 0,
        top: 0,
        type: null,
      },
      pic: false,
      stepsOptions: {
        labels: {
          buttonSkip: '跳过指引',
          buttonPrevious: '上一步',
          buttonNext: '下一步',
          buttonStop: '结束',
        },
        highlight: true,
      },
      myCallbacks: {
        onFinish: this.tourClose,
        onSkip: this.tourClose,
      },
      steps: [
        {
          target: '#v-step-0', // We're using document.querySelector() under the hood
          content: `拖拽文件到文件区域，<br/>可上传文件!`,
          params: {
            highlight: true,
            placement: 'left',
          },
        },
        {
          target: '#v-step-1', // We're using document.querySelector() under the hood
          content: `多文件或大文件上传时<br/>可查看上传进度!`,
          params: {
            placement: 'bottom',
          },
        },
        {
          target: '#v-step-2', // We're using document.querySelector() under the hood
          content: `可搜索上传过的文件!`,
          params: {
            placement: 'bottom',
          },
        },
        {
          target: '#v-step-3', // We're using document.querySelector() under the hood
          content: `点击可切换页面展现形式!`,
          params: {
            placement: 'bottom',
          },
        },
      ],
      officeFlag: false,
      previewInfo: null,
      codeFlag: false,
      videoFlag: false,
    }
  },
  components: {
    buttonBar,
    ElImageViewer,
    DownloadButton,
    ShareButton,
    RenameButton,
    CopyButton,
    TransferButton,
    DeleteButton,
    createFolderButton,
    uploadButton,
    VideoImg,
    PanTaskList,
    officePreview,
    codePreview,
    videoPreview,
    // UploadList,
  },
  methods: {
    getPreviewUrl: panUtil.getPreviewUrl,
    tourClose() {
      localStorage.setItem('tour', true)
    },
    toggleAll() {
      if (this.multipleSelection.length < this.fileList.length) {
        this.handleSelectionChange(JSON.parse(JSON.stringify(this.fileList)))
      } else {
        this.clearSelect()
      }
    },
    fileDragEnter() {
      if (!this.uploadDialogVisible && !this.from) {
        this.setUploadShow(true)
      }
    },
    async xhrequest(url, callback) {
      let DownUrl = url
      let data = await fetch(DownUrl)
        .then((response) => response.blob())
        .then((res) => {
          //获取文件格式
          var index = DownUrl.lastIndexOf('.')
          //获取文件后缀判断文件格式
          var fileType = 'mp4'
          let blod = new Blob([res])
          if (typeof callback == 'function') {
            callback(blod, fileType)
          }
        })
      return data
    },
    async getVideoPreviewUrl(fileId) {
      try {
        const videoMain = this.getPreviewUrl(fileId)
        const data = await fetch(videoMain)
        const blob = await data.blob()
        const video = new Video(blob)
        const thumbnails = await video.getThumbnails({
          quality: 0.1,
          start: 0,
          end: 0,
        })
        if (thumbnails) {
          // return window.URL.createObjectURL(thumbnails[0].blob)
          return thumbnails[0].blob
        }
      } catch (error) {}
    },
    ...mapMutations({
      reloadSelection: 'file/setMultipleSelection',
      resetParentId: 'file/setFileParentId',
      clearBreadCrumbs: 'breadcrumb/clear',
      resetBreadCrumbs: 'breadcrumb/reset',
      setSearchFlag: 'file/setSearchFlag',
      setSearchShow: 'file/setSearchShow',
      setUploadShow: 'file/setUploadShow',
      setContextMenuVisible: 'file/setContextMenuVisible',
    }),
    ...mapActions({
      reloadFileList: 'file/loadFileList',
    }),
    push(dom, index, item) {
      this.items[index] = {
        selected: false,
        dom: dom,
        item,
      }
    },
    fileRightMenu(event) {
      this.rightMenuConfig.left = event.clientX
      this.rightMenuConfig.top = event.clientY
      this.rightMenuConfig.type = 'file'
      this.$nextTick(() => {
        this.clearSelect()
        this.setContextMenuVisible(true)
      })
    },
    itemRightMenu(event, item, index) {
      event.stopPropagation()
      this.rightMenuConfig.left = event.clientX
      this.rightMenuConfig.top = event.clientY
      this.rightMenuConfig.type = 'item'
      this.$nextTick(() => {
        this.setContextMenuVisible(true)
        let selectList = JSON.parse(JSON.stringify(this.multipleSelection))
        const index = selectList.findIndex((val) => {
          return val.fileId === item.fileId
        })
        if (index >= 0) {
        } else {
          this.handleSelectionChange([item])
        }
      })
    },
    deleteFile() {
      let _this = this
      if (_this.multipleSelection && _this.multipleSelection.length > 0) {
        let fileIdArr = new Array()
        _this.multipleSelection.forEach((item) => fileIdArr.push(item.fileId))
        _this.doDeleteFile(fileIdArr.join('__,__'))
        return
      }
      _this.$message.error('请选择要删除的文件')
    },
    doDeleteFile(fileIds) {
      let _this = this
      _this
        .$confirm('文件删除后将保存在回收站，您确定这样做吗？', '删除文件', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          fileService.delete(
            {
              fileIds: fileIds,
            },
            (res) => {
              _this.$message.success('删除成功')
              _this.reloadFileList()
            },
            (res) => {
              _this.$message.error(res.message)
            }
          )
        })
    },
    /**
     * @name: 文件拖拽开始
     * @description: 拖拽开始记录要移动的文件
     * @param {*} event
     * @param {*} file 当前拖拽的文件
     * @return {*}
     */
    onDragStart(event, file) {
      // 判断是否有选中
      if (this.multipleSelection.length > 0) {
        let selectList = JSON.parse(JSON.stringify(this.multipleSelection))
        const index = selectList.findIndex((val) => {
          return val.fileId === file.fileId
        })
        // 有选中判断拖拽项在不在选中之中 ，在选中之中则所有选中的项都移动，不在选中之中则只移动当前
        if (index >= 0) {
          selectList.map((item) => {
            if (this.from) {
              this.from = this.from + '__,__' + item.fileId
            } else {
              this.from = item.fileId
            }
          })
        } else {
          this.clearSelect()
          this.from = file.fileId
        }
      } else {
        this.from = file.fileId
      }
    },
    /**
     * @name: 文件拖拽松手
     * @description: 松手后记录目的地文件
     * @param {*} event
     * @param {*} file 当前要放置的文件
     * @return {*}
     */
    onDrop(event, file) {
      event.preventDefault()
      this.to = file
    },
    /**
     * @name: 单选文件
     * @description: 单选文件,存在多个选中则只留当前
     * @param {*} item
     * @return {*}
     */
    selectItem(item) {
      this.setContextMenuVisible(false)
      let selectList = JSON.parse(JSON.stringify(this.multipleSelection))
      const index = selectList.findIndex((val) => {
        return val.fileId === item.fileId
      })
      if (index >= 0) {
        if (this.tableType === 1) {
          selectList.splice(index, 1)
          this.handleSelectionChange(selectList)
        } else {
          if (selectList.length > 1) {
            this.handleSelectionChange([item])
          }
        }
      } else {
        if (this.tableType === 1) {
          selectList.push(item)
          this.handleSelectionChange(selectList)
        } else {
          this.handleSelectionChange([item])
        }
      }
    },
    /**
     * @name: 按住sfift多选
     * @description: 按住shfit多选判断离当前选中最近的一个把两个文件中间的文件都选上
     * @param {*} item 按住shift后点击的文件
     * @param {*} index 按住shift后点击的序号
     * @return {*}
     */
    shiftSelectItems(item, index) {
      let selectList = JSON.parse(JSON.stringify(this.multipleSelection))
      if (selectList.length <= 0) {
        return
      }
      const lastIndex = this.fileList.findIndex((val) => {
        return val.fileId === selectList[selectList.length - 1].fileId
      })
      // selectList = []
      for (
        let i = index < lastIndex ? index : lastIndex;
        i <= (index < lastIndex ? lastIndex : index);
        i++
      ) {
        const itemIndex = selectList.findIndex((val) => {
          return val.fileId === this.fileList[i].fileId
        })

        if (itemIndex < 0) {
          selectList.push(this.fileList[i])
        }
      }
      this.handleSelectionChange(selectList)
    },
    /**
     * @name: 多选文件
     * @description: 1.可以是按住ctrl点击调用，2.可以是划区域多选，
     * @param {*} item
     * @return {*}
     */
    selectItems(item) {
      const index = this.getListIndex(item)
      if (index >= 0) {
        // 删除
        this.selectList.splice(index, 1)
      } else {
        // 添加
        this.selectList.push(item)
      }
      this.handleSelectionChange(this.selectList)
    },
    /**
     * @name: 清空选中
     * @description: 清空选中
     * @return {*}
     */
    clearSelect() {
      console.log(2)
      this.handleSelectionChange([])
      this.setContextMenuVisible(false)
      this.setSearchShow(false)
    },
    getListIndex(item) {
      return this.multipleSelection.findIndex(function (val) {
        return val.fileId === item.fileId
      })
    },
    /**
     * @name: 根据文件类型获取图标
     * @description: 根据文件类型获取图标
     * @param {*} type
     * @return {*}
     */
    getFileFontElement(type) {
      return panUtil.getFileFontElement2(type)
    },
    /**
     * @name: 执行选中变化
     * @description:
     * @param {*} multipleSelection
     * @return {*}
     */
    handleSelectionChange(multipleSelection) {
      this.reloadSelection(multipleSelection)
    },
    showOperation(row, column, cell, event) {
      panUtil.showOperation(cell)
    },
    hiddenOperation(row, column, cell, event) {
      panUtil.hiddenOperation(cell)
    },
    /**
     * @name: 双击文件时执行
     * @description: 双击文件时执行判断类型进行展示或穿透
     * @param {*} row
     * @return {*}
     */
    clickFilename(row) {
      let _this = this
      switch (row.fileType) {
        case 0:
          _this.goInFolder(row.fileId)
          break
        case 3:
        case 4:
        case 5:
        case 10:
          _this.showOffice(row)
          break
        // case 10:
        //   _this.showOfficeOld(row)
        //   break
        // case 6:
        //   _this.showIframe(row)
        //   break
        case 7:
          _this.showImg(row)
          break
        case 8:
          _this.showMusic(row)
          break
        case 9:
          _this.showVideo(row)
          break
        case 6:
        case 11:
          _this.showCode(row)
        default:
          break
      }
    },
    showOfficeOld(row) {
      this.openNewPage('/preview/office', 'PreviewOffice', {
        fileId: row.fileId,
      })
    },
    /**
     * @name: 跳转子文件夹
     * @description: 跳转子文件夹
     * @param {*} fileId 文件夹id
     * @return {*}
     */
    goInFolder(fileId) {
      let _this = this
      fileService.getBreadcrumbs(
        {
          fileId: fileId,
        },
        (res) => {
          _this.setSearchFlag(false)
          _this.clearBreadCrumbs()
          _this.resetBreadCrumbs(res.data)
          _this.resetParentId(fileId)
          _this.reloadFileList()
          _this.clearSelect()
        },
        (res) => {
          _this.$message.error(res.message)
        }
      )
    },
    /**
     * @name: 查看office文件
     * @description: 查看office文件
     * @param {*} row
     * @return {*}
     */
    showOffice(row) {
      this.officeFlag = true
      this.previewInfo = row
      // this.openNewPage('/preview/office', 'PreviewOffice', {
      //   fileId: row.fileId,
      // })
    },
    closeShow() {
      this.previewInfo = null
    },
    showIframe(row) {
      this.openNewPage('/preview/iframe', 'PreviewIframe', {
        fileId: row.fileId,
      })
    },
    /**
     * @name: 图片预览
     * @description: 图片预览
     * @param {*} row
     * @return {*}
     */
    showImg(row) {
      this.imgUrl = new Array()
      this.clearSelect()
      for (let i = 0, iLength = this.fileList.length; i < iLength; ++i) {
        if (this.fileList[i].fileType === 7) {
          this.imgUrl.push(panUtil.getPreviewUrl(this.fileList[i].fileId))
        }
      }
      this.imgUrl.map((item, index) => {
        if (item.includes(row.fileId)) {
          this.imgIndex = index
        }
      })
      this.showViewer = true
    },
    /**
     * @name: 关闭图片预览
     * @description: 关闭图片预览
     * @return {*}
     */
    closeShowViewer() {
      this.showViewer = false
    },
    /**
     * @name: 查看音频文件
     * @description: 查看音频文件
     * @param {*} row
     * @return {*}
     */
    showMusic(row) {
      this.openNewPage('/preview/music', 'PreviewMusic', {
        fileId: row.fileId,
        parentId: row.parentId,
      })
    },
    showVideo(row) {
      this.videoFlag = true
      this.previewInfo = row
      // this.openNewPage('/preview/video', 'PreviewVideo', {
      //   fileId: row.fileId,
      //   parentId: row.parentId,
      // })
    },
    /**
     * @name: 查看代码文件
     * @description: 查看代码文件
     * @param {*} row
     * @return {*}
     */
    showCode(row) {
      this.codeFlag = true
      this.previewInfo = row
      // this.openNewPage('/preview/code', 'PreviewCode', {
      //   fileId: row.fileId,
      // })
    },
    openNewPage(path, name, params) {
      const { href } = this.$router.resolve({
        path: path,
        name: name,
        params: params,
      })
      window.open(href, '_blank')
    },
    throttle(fn, wait) {
      var pre = Date.now()
      return function () {
        var context = this
        var args = arguments
        var now = Date.now()
        if (now - pre >= wait) {
          fn.apply(context, args)
          pre = Date.now()
        }
      }
    },
    blobToDataURI(blob, callback) {
      var reader = new FileReader()
      reader.readAsDataURL(blob)
      reader.onload = function (e) {
        callback(e.target.result)
      }
    },
  },
  computed: {
    ...mapGetters([
      'parentId',
      'fileTypes',
      'fileList',
      'searchFlag',
      'tableLoading',
      'tableType',
      'multipleSelection',
      'username',
      'contextMenuVisible',
    ]),
    videoList() {
      const list = {}
      // this.fileList.map((item) => {
      //   if (item.fileType === 9) {
      //     this.getVideoPreviewUrl(item.fileId).then((res) => {
      //       console.log(res)
      //       this.blobToDataURI(res, function (result) {
      //         //blob格式再转换为base64格式
      //         //  document.getElementById('img2').src = result;
      //         list[item.fileId] = result
      //       })
      //     })
      //   }
      // })
      return list
    },
    selectList() {
      return JSON.parse(JSON.stringify(this.multipleSelection))
    },
    checkAll() {
      if (this.multipleSelection.length === this.fileList.length) {
        return true
      } else {
        return false
      }
    },
  },
  watch: {
    /**
     * @name: 监听全选按钮变化
     * @description: 控制是否全选
     * @return {*}
     */
    videoList: {
      handler(val) {
        console.log(val)
        this.pic = true
      },
      deep: true,
    },
    /**
     * @name: 监听文件拖拽移动操作
     * @description: from和to都有值得时候进行移动，成功之后清除
     * @return {*}
     */
    to: {
      handler(val) {
        const _this = this
        _this.$nextTick(() => {
          if (_this.from && val.fileType === 0) {
            fileService.transfer(
              {
                fileIds: _this.from,
                targetParentId: val.fileId,
              },
              () => {
                _this.$message.success('文件移动成功')
                _this.to = null
                _this.from = null
                _this.clearSelect()
                _this.reloadFileList()
              },
              (res) => {
                _this.$message.error(res.message)
              }
            )
          } else {
            _this.from = null
            _this.to = null
          }
        })
      },
      deep: true,
    },
  },
  mounted() {
    // console.log(draggable)
    if (!localStorage.getItem('tour')) {
      this.$tours['myTour'].start()
    }
    this.setContextMenuVisible(false)
    this.reloadSelection(new Array())
    const _this = this
    /**
     * @name: 监听ctrl + A 全选
     * @description: 按住ctrl + A全选
     * @param {*} event
     * @return {*}
     */
    document.onkeydown = function (event) {
      if (event.ctrlKey && window.event.keyCode === 65) {
        //禁用ctrl + a 功能
        _this.$nextTick(() => {
          _this.handleSelectionChange(
            JSON.parse(JSON.stringify(_this.fileList))
          )
        })
        return false
      }
      if (window.event.keyCode === 46 && _this.multipleSelection.length > 0) {
        _this.deleteFile()
      }
    }
    // 页面滚动取消右键菜单  _this.contextMenuVisible = false
    this.$nextTick(() => {
      document
        .querySelector('.el-scrollbar__wrap')
        .addEventListener('scroll', (e) => {
          if (this.tableType === 2) {
            if (e.target.scrollTop === 0) {
              this.isTop = true
            } else {
              this.isTop = false
            }
          }

          if (this.contextMenuVisible) {
            this.setContextMenuVisible(false)
          }
        })
    })
  },
}
</script>

<style lang="scss" scoped>
.file {
  height: calc(100vh - 45px);
  position: relative;
  overflow: hidden;
  &-list1 {
    display: flex;

    padding: 0 20px 0;

    &.table {
      flex-direction: column;
    }
    .item {
      width: 100%;
    }
    .file-item {
      display: flex;
      padding: 20px;
      border-bottom: 1px solid #eee;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
      cursor: pointer;
      &.sortable-ghost {
        display: none;
      }
      .check {
        margin-right: 20px;
      }

      .name {
        flex: 1;
        user-select: none;
      }
      .time {
        width: 200px;
        text-align: left;
        user-select: none;
        color: #000;
      }
      .size {
        width: 60px;
      }
    }

    &.list {
      .file-item {
        justify-content: flex-start;
        border-color: #fff;
        &.on {
          border-color: #eee;
        }
      }
    }
  }
  &-list {
    display: flex;
    padding: 0 20px 20px;

    &.table {
      flex-direction: column;
    }
    .file-item {
      display: flex;
      padding: 15px 20px;
      border-bottom: 1px solid #eee;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
      cursor: pointer;
      .el-image {
        display: inherit;
        overflow: visible;
        :deep(img) {
          border: 1px solid #eee;
        }
      }
      &.sortable-ghost {
        display: none;
      }
      &:hover {
        background-color: #f7f7f7;
      }
      .check {
        margin-right: 20px;
        pointer-events: none;
        position: relative;
        &::after {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          display: block;
          left: 0;
          top: 0;
        }
      }
      .icon {
        width: 30px;
        text-align: center;
        margin-bottom: 0px;
        margin-right: 10px;
        font-size: 20px;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .play-btn {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
          border-radius: 100%;
          border: 1px solid #fff;
          width: 30px;
          height: 30px;
          z-index: 5;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 30px !important;
          i {
            font-size: 16px !important;
            margin-left: 3px;
          }
        }
        i {
          font-size: 20px;
          margin-right: 15px;
        }

        .svgicon {
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          // overflow: hidden;
          // margin-right: 15px;
        }
      }
      .name {
        flex: 1;
        user-select: none;
      }
      .time {
        width: 200px;
        text-align: left;
        user-select: none;
        color: #000;
      }
      .size {
        width: 60px;
      }
    }
    &.list {
      flex-direction: row;
      flex-wrap: wrap;
      margin: -10px;

      // background-color: #999;

      position: relative;

      .move {
        position: absolute;
        background: rgba(234, 23, 135, 0.3);
        z-index: 10;
        // width: 100px !important;
        // height: 100px !important;
      }
      .item {
        overflow: hidden;
        min-width: 180px;
        // &:first-child {
        //   display: none;
        // }
        @media screen and (min-width: 768px) {
          width: 50%;
        }
        @media screen and (min-width: 1024px) {
          width: 25%;
        }
        @media screen and (min-width: 1360px) {
          width: 20%;
        }
        @media screen and (min-width: 1475px) {
          width: 14.2%;
        }
        @media screen and (min-width: 1920px) {
          width: 11.11%;
        }
      }
      .file-item {
        flex-direction: column;
        border-bottom: none;
        padding: 20px;
        // justify-content: flex-start;
        align-items: center;
        border-radius: 2px;
        border: 1px solid #ffffff;
        margin: 10px;
        position: relative;
        &:hover {
          background-color: #f7f7f7;
          border: 1px solid #f7f7f7;
        }

        &.on {
          background-color: #f7f7f7;
          border: 1px solid #66b1ff;
        }

        .el-icon-circle-check {
          position: absolute;
          left: 10px;
          top: 10px;
          font-size: 16px;
          color: #409eff;
        }

        .name {
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100%;
          text-align: center;
        }
        .icon {
          margin-bottom: 10px;
          margin-right: 0;
          font-size: 60px;
          height: 90px;
          width: auto;

          i {
            font-size: 30px;
            margin-right: 0;
          }
          .svgicon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            // overflow: hidden;
            margin-right: 0;
          }
        }
        .size {
          display: none;
        }
        .time {
          width: auto;
          color: #999;
        }
      }
    }
  }
  :deep(.is-horizontal) {
    display: none;
  }
  :deep(.el-scrollbar__wrap) {
    overflow-x: hidden;
  }
}
.right-menu {
  position: fixed;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  z-index: 999;
  border: 1px solid #eee;
  box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
  :deep(div) {
    display: block;
    margin-right: 0px;
  }
  a,
  :deep(a) {
    min-width: 100px;
    height: 3em;
    line-height: 3em;
    font-size: 13px;

    display: block;
    color: #1a1a1a;
    text-decoration: none;
    padding: 0 10px;
    &.red {
      color: #f78989;
    }

    &:hover {
      background: #65c6cf;
      color: #fff;
    }

    i {
      margin-right: 10px;
    }
  }
}

.empty {
  height: calc(100vh - 46px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ccc;
  .icon {
    margin: 0 auto 20px;
    .iconfont {
      font-size: 60px;
    }
  }
  .title {
    font-size: 18px;
  }
}

:deep(.v-step) {
  background-color: #fff !important;
  color: #50596c !important;
  .v-step__button {
    border: 0.05rem solid #50596c !important;
    color: #50596c !important;
  }
}

// .v-tour::after {
//   background-color: rgba(0, 0, 0, 0.5);
//   content: '';
//   display: block;
//   width: 100vw;
//   height: 100vh;
//   position: fixed;
//   left: 0;
//   top: 0;
//   z-index: 999;
// }
</style>
